<template>
  <div class="app">
    <div class="loginCard">
      <!-- 新增头部区域 -->
      <header class="card-header">
        <img src="@/assets/wuye.png" alt="Logo" class="logo" />
        <h1 class="header-title">智慧物业</h1>
      </header>

      <el-form
        ref="employee"
        :model="employee"
        label-width="80px"
        class="loginForm"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="employee.phone"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="employee.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="regerted" style="margin-left: -90px"
            >立即注册</el-button
          >

          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      employee: {},
    };
  },
  mounted() {},

  methods: {
    login() {
      this.$axios
        .get("/users/login", {
          params: {
            phone: this.employee.phone,
            password: this.employee.password,
          },
        })
        .then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            //跳转
            this.$router.push("/main");
          } else if (resp.data.code == 431) {
            this.$message.error(resp.data.msg);
          } else {
            this.$message.error("登录失败");
          }
        });
    },

    regerted() {
      this.$router.push("/register");
    },
  },
};
</script>
<style scoped>
/* 页面全局蓝色背景 */
/* 页面全局蓝色背景 */
.app {
  /* background-image: url('@/assets/yy.png'); */
  background-color: #4a90e2;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.loginCard {
  position: relative;
  width: calc(500px - 40px);
  height: calc(500px - 40px);
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: -20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.logo {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  object-fit: cover;
}

.header-title {
  font-size: 24px;
  font-weight: bold;
}

/* 保持表单内容居中 */
.el-form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 修改为从顶部开始对齐 */
  height: 100%;
  padding-top: 40px; /* 增加表单与卡片顶部的距离 */
}
/* 为表单项添加上边距 */
.el-form-item {
  margin-top: 20px; /* 根据需要调整上边距大小 */
}
.el-form-item__label {
  color: #333; /* 表单项标签颜色 */
}

.el-button--primary {
  background-color: #409eff; /* 登录按钮颜色 */
  border-color: #409eff;
  color: #fff;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
/* .el-button{
    margin-left: -10px;
} */
</style>